<template>
	<view class="">
		<cu-navbar bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的相册</block>
		</cu-navbar>
		<view class="cu-list menu-avatar">
			<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list"
				:key="index" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
				:data-target="'move-box-' + index">
				<view class="cu-avatar round lg" @click="goPage(item.path+'?pid='+item._id)" :style="[bgStyle(item.images)]"></view>
				<view class="content" @click="goPage(item.path+'?pid='+item._id)">
					<view class="text-grey">{{item.title}}</view>
					<view class="text-gray text-sm">
						<!-- <text class="cuIcon-infofill text-red  margin-right-xs"></text> 消息未送达 -->
					</view>
				</view>
				<!-- <view class="action">
					<view class="text-grey text-xs">22:20</view>
					<view class="cu-tag round bg-grey sm">5</view>
				</view> -->
				<view class="move">
					<view class="bg-grey">
						<!-- #ifdef MP-WEIXIN -->
						<button class="cu-share-btn" :data-index="index" open-type="share">分享</button>
						<!-- #endif -->
						<!-- #ifndef  MP-WEIXIN-->
						<button class="cu-share-btn" @click="copy">分享</button>
						<!-- #endif -->
					</view>
					<view class="bg-red" @click="del(item._id,index)">删除</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getMyphoto()
		},
		computed: {
			bgStyle() {
				return images => {
					const img = typeof images[0] != 'string' ? images[0][0] : images[0];
					return {
						backgroundImage: 'url(' + img + ')'
					};
				}
			}
		},
		data() {
			return {
				list: [],
				lastId: '',
				listTouchStart: 0,
				modalName: null,
			}
		},
		methods: {
			getMyphoto() {
				this.$api.getMyphoto({
					lastId: this.lastId
				}).then(({
					code,
					data,
					message
				}) => {
					if (!code) {
						let len = data.length;
						if (len) {
							this.lastId = data[len - 1]._id;
						} else {
							this.lastId = '';
						}
						this.list = [...this.list, ...data];
					}
				})
			},
			//删除相册
			del(id, index) {
				this.$api.delphoto({
					id
				}).then(({
					code,
					data,
					message
				}) => {
					if (!code) {
						this.list.splice(index, 1)
					}
					this.$cu.toast(message);
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},			
			imgUrl(images){
				return typeof images[0] != 'string' ? images[0][0] : images[0];
			},
			copy(){
				
			}
		},
		onReachBottom() {
			if (this.lastId) {
				this.getMyphoto();
			}
		},
		onShareAppMessage(e){
			if(e.from=='button'){
				const index = e.target.dataset.index;
				const row = this.list[index];				
				return {
					title: row.title, // 默认为小程序名称
					path: row.path+'?pid='+row._id, // 默认为当前页面路径
					imageUrl: this.imgUrl(row.images) // 默认为当前页面的截图
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-share-btn {
		display: flex;
		width: 100%;
		height: 100%;
		background-color: rgba($color: #ffffff, $alpha: 0);
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		&:after {
			border: none;
		}
	}
</style>
